<template>
	<div class="admin">
		<div class="admin-title">{{ t("registrationList.title") }}</div>
		<CommonTable
			:table-data="tableData"
			:table-config="tableConfig"
			:table-loading="loading"
			:is-show-index="true"
		>
            <template #createTime="{row}">{{ formatDateTime(row.createTime) }}</template>
			<template #operations="{ row }">
				<el-button size="small" @click="handleEdit(row)">{{ t("registrationList.viewForm") }}</el-button>
			</template>
		</CommonTable>

		<Pagination
			:background="true"
			:total="total"
			:current-page.sync="pageNum"
			:page-size.sync="pageSize"
			@pagination-change="paginationChange"
			class="pagination"
		/>
	</div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { GetRealtimeinfoUserCustomList } from '~/apis/web';
import { userStore } from '~/composables/store/modules/user';
import { formatDateTime } from "@/utils/utils";

definePageMeta({
	title: '报名列表',
	en_title: 'Registration List',
	zh_hk_title: '報名清單',
	ssr: true,
	isTokenCheck: true,
});

const { t } = useI18n();
const store = userStore();
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
// 表格配置
const tableConfig = computed(() => [
	{
		prop: 'createTime',
		label: t("registrationList.columns.createTime"),
    slotName: "createTime",
	},
	{
		prop: 'realtimeinfoName',
		label: t("registrationList.columns.infoName"),
	},
	{
		prop: 'customTableId',
		label: t("registrationList.columns.formId"),
	},
	{
		prop: 'customTableName',
		label: t("registrationList.columns.formName"),
	},
	{
		prop: 'operations',
		label: t("registrationList.columns.actions"),
		width: '100px',
		slotName: 'operations', // 添加操作列
	},
]);

// 表格数据
const tableData = ref([]);

const loading = ref(false);
const handleEdit = row => {
	console.log(t("registrationList.viewForm"), row);
};

async function loadData() {
	if (loading.value) return;
	loading.value = true;
	try {
		const query = {
			pageNo: pageNum.value,
			pageSize: pageSize.value,
			userId: store.user.id,
			createTimeBegin: null,
			createTimeEnd: null,
		};
		const { code, data } = await GetRealtimeinfoUserCustomList(query);
		if (code == 0) {
			tableData.value = data?.list || [];
			total.value = data?.total || 0;
		}
	} finally {
		loading.value = false;
	}
}

const paginationChange = async val => {
	pageNum.value = val.currentPage;
	pageSize.value = val.pageSize;
	loadData();
};

loadData();
</script>
